<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<div slot="header">
			<l-back class="mb-[38px]" />
			<el-form ref="queryForm" :inline="true" :model="queryParams" label-width="75px">
				<el-form-item label="商品ID:" prop="goodsId">
					<el-input v-model.trim="queryParams.goodsId" clearable maxlength="11" show-word-limit placeholder="请输入商品ID" />
				</el-form-item>
				<el-form-item label="商品名称:" prop="goodsName">
					<el-input v-model.trim="queryParams.goodsName" clearable placeholder="请输入商品名称" />
				</el-form-item>
				<el-form-item label="用户ID:" prop="uuid">
					<el-input v-model.trim="queryParams.uuid" clearable maxlength="6" show-word-limit placeholder="请输入用户ID" />
				</el-form-item>
				<el-form-item label="手机号码:" prop="mobile">
					<el-input v-model.trim="queryParams.mobile" clearable maxlength="11" show-word-limit placeholder="请输入手机号码" />
				</el-form-item>
				<el-form-item label="秒杀状态:" prop="cutStatus">
					<el-select v-model="queryParams.cutStatus" clearable filterable placeholder="请选择秒杀状态">
						<el-option v-for="(value, index) in statusList" :key="index" :label="value.label" :value="value.value"></el-option>
					</el-select>
				</el-form-item>
				<start-end-time ref="child" :get-time="getTime" title="创建时间:"></start-end-time>
			</el-form>
		</div>

		<template slot="options">
			<l-search @search="queryList" @refresh="resetQuery" />
		</template>

		<el-table v-loading="loading" :data="goodsList" stripe>
			<el-table-column :formatter="emptyToString" align="center" label="序号" prop="id" type="index" width="100px"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="uuid" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="goods_id" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="NAME" show-overflow-tooltip min-width="156"> </el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
				<template slot-scope="scope">
					<el-image :preview-src-list="[scope.row.pic_url]" :src="scope.row.pic_url" style="width: 48px; height: 48px"></el-image>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="手机号码" prop="mobile" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="供应价格" min-width="120" prop="supply_price" />
			<el-table-column :formatter="emptyToString" align="center" label="商品价格" min-width="120" prop="retail_price" />
			<el-table-column :formatter="emptyToString" align="center" label="购买金额" min-width="120" prop="autal_price" />
			<el-table-column :formatter="emptyToString" align="center" label="砍价人数" min-width="120" prop="cut_peoples" />
			<el-table-column :formatter="emptyToString" align="center" label="状态" min-width="120" prop="cut_status">
				<template slot-scope="scope">
					<div style="display: flex; justify-content: center">
						<div v-if="scope.row.cut_status == 1" style="line-height: 22px; color: #1d2eb8; width: 64px; height: 22px; font-size: 12px; background: #35bb1c; border-radius: 4px">成功</div>
						<div v-else-if="scope.row.cut_status == 2" style="line-height: 22px; color: #1d2eb8; width: 64px; height: 22px; font-size: 12px; background: #e9d418; border-radius: 4px">进行中</div>
						<div v-else style="line-height: 22px; color: #1d2eb8; width: 64px; height: 22px; font-size: 12px; background: #f14a46; border-radius: 4px">失败</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" min-width="200" label="创建时间" prop="create_time">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.create_time).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.create_time).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<l-dialog v-model="showDetails" :show-button="false" title="砍价详情" width="1220px" @close="close">
			<el-table v-loading="loadingDetails" :data="detailsList" stripe>
				<el-table-column :formatter="emptyToString" align="center" label="序号" prop="cut_sn" width="120px"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="uuid" width="120px"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="手机号码" prop="mobile" />
				<el-table-column :formatter="emptyToString" align="center" label="砍掉金额" prop="cut_money" />
				<el-table-column :formatter="formatDate" align="center" label="砍价时间" prop="create_time" />
			</el-table>
			<pagination v-show="goodsForm.total > 0" :limit.sync="goodsForm.pageSize" :page.sync="goodsForm.pageNum" :total="goodsForm.total" @pagination="getKillGoodsDetails" />
		</l-dialog>
	</l-page>
</template>
<script>
import { getZoneList } from '@/api/mall/prefecture';
import { formatDate2 } from '@/utils';
import { getCutRecord, getCutRecordInfo } from '@/api/mall/bargain';
import tableMixins from '@/mixins/table';

export default {
	name: 'Index',
	mixins: [tableMixins],
	data() {
		return {
			statusList: [
				{
					label: '全部',
					value: null,
				},
				{
					label: '成功',
					value: 1,
				},
				{
					label: '进行中',
					value: 2,
				},
				{
					label: '失败',
					value: 3,
				},
			],
			detailsList: [],
			showDetails: false,
			loadingDetails: false,
			cutTime: '',
			cutPrice: '',
			cutCount: '',
			editForm: {},
			title1: '',
			showFlag: false,
			price: '',
			date: '',
			zoneId: '',
			selectShowFlag: false,
			loading: true,
			// 是否显示弹出层
			open: false,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				categoryId: null,
				mobile: null,
				date: [],
				goodsName: null,
				goodsId: null,
				beginTime: null,
				endTime: null,
				zoneId: null,
				uuid: null,
				cutStatus: null,
			},
			goodsList: [],
			// 表单参数
			form: {},
			total: 0,
			showAdd: false,
			// 表单校验

			goodsDetail: '',
			detailDialogVisible: false,
			zoneList: [],
			goodsForm: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			selectList: [],
			addGoodsFlag: false,
			goodsTotal: 0,
			zoneName: '',
			goodsZoneList: [],
			selectListNow: [],
			disable: true,
			cutId: '',
			list: [],
		};
	},

	created() {
		this.getList();
		this.getZoneList();
	},
	methods: {
		getTime(startTime, endTime) {
			this.queryParams.beginTime = startTime;
			this.queryParams.endTime = endTime;
		},
		formatDate(row) {
			return formatDate2(row.create_time);
		},
		close() {
			this.showDetails = false;
			this.goodsForm = {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			};
		},
		getZoneList() {
			getZoneList({}).then((res) => {
				this.zoneList = res.data;
			});
		},
		getList() {
			this.loading = true;
			getCutRecord(this.queryParams)
				.then((response) => {
					this.goodsList = response.data.records;
					this.total = response.data.total;
					this.setActionWidth();
				})
				.finally(() => {
					this.loading = false;
				});
		},
		getKillGoodsDetails() {
			this.loadingDetails = true;
			getCutRecordInfo(this.goodsForm).then((res) => {
				this.detailsList = res.data.records;
				this.goodsForm.total = res.data.total;
				this.loadingDetails = false;
			});
		},
		handleUpdate(id) {
			this.goodsForm.cutSn = id;
			this.getKillGoodsDetails();
			this.showDetails = true;
		},
		resetQuery() {
			this.$refs.child.resetTime();
			this.$refs.queryForm.resetFields();
			this.queryList();
		},
		queryList() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
	},
};
</script>
<style lang="scss" scoped>
.el-form-item {
	margin-right: 40px;
}

.btn-box {
	display: flex;
	justify-content: center;

	.btn2 {
		background: #1a2483;
		opacity: 1;
		border: none;
	}

	.btn {
		width: 236px !important;
		line-height: 60px;
		height: 60px;
		padding: 0;
		text-align: center;
	}
}

.edit-form {
	.goods-info {
		display: flex;
		border-radius: 8px;
		border: 1px dashed transparent;
		background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.25em, white 0, white 0.75em);
		width: 100%;
		height: 127px;
		box-sizing: border-box;
		padding: 14px 18px;

		.right {
			padding-left: 30px;
			font-size: 16px;
			overflow: hidden;
			flex: 1;

			.goods-name {
				color: #333333;
			}

			.goods-id {
				color: #808a97;
				margin-top: 15px;
			}

			.goods-price {
				color: #f14a46;
				font-weight: 900;
				margin-top: 15px;

				span {
					font-size: 10px;
				}
			}
		}

		img {
			display: block;
			width: 100px;
			height: 100px;
			border-radius: 8px;
		}
	}

	.title {
		text-align: left;
		vertical-align: middle;
		font-size: 14px;
		color: #606266;
		line-height: 40px;
		font-weight: bold;
	}
}

.bottom-btn-box {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 20px;

	> div {
		position: absolute;
		font-size: 14px;
		height: 60px;
		line-height: 60px;
		left: 80px;

		span {
			color: #f14a46;
		}
	}

	.btn {
		width: 236px;
		height: 60px;
		padding: 0;
		font-size: 18px;
	}

	.btn2 {
		background: #1a2483;
		border: none;
	}
}

.commit-btn {
	width: 494px;
	height: 60px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	border-radius: 4px;
	text-align: center;
	margin: 0px auto;
	border: 1px;
	color: #ffffff;
	font-size: 18px;
}

.pl-edit-btn {
	width: 75px;
	height: 35px;
	background: #6373ee;
	opacity: 1;
	font-size: 12px;
	padding: 10px 12px;
	text-align: center;
	border: none;
	margin-left: 10px;

	&:hover {
		background: #6373ee;
		opacity: 1;
	}
}

.select-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	border: none;

	&:hover {
		background: #1a2483;
		opacity: 1;
	}
}

.search-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	color: #fff;
	border: none;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	font-size: 12px;
	display: inline-block;
	cursor: pointer;
}

.add-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	color: #fff;
	border: none;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	font-size: 12px;
	cursor: pointer;
}

.table {
	margin-top: 20px;
	border: 1px solid #f7f7f7;
	opacity: 1;
	border-radius: 10px;

	.btn {
		height: 36px;
		border: none;
		border-radius: 4px;
		color: #ffffff;
	}

	.btn1 {
		background: #6373ee;
	}

	.btn2 {
		background: #1d2eb8;
	}

	.btn3 {
		background: #1a2483;
	}
}
</style>
